<template>
  <div class="goodsInfo">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <!-- 轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <!-- 轮播图组件  这里绑定的属性:lunbotuList要和子组件中的props中的值一样-->
          <lunbotu :lunbotuList="lunboList"></lunbotu>
        </div>
      </div>
    </div>
    <!-- 商品简介区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsList.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价:
            <del>${{goodsList.market_price}}</del>&nbsp;&nbsp;销售价:
            <span class="now_price">${{goodsList.sell_price}}</span>
          </p>
          <p>
            购买数量:
            <numbox @getcount="getSelectedCount" :max="goodsList.stock_quantity"></numbox>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopcar">加入购物车</mt-button>

            <!-- 分析:如何实现加入购物车时候,拿到选择的数量
			    1.经过分析发现:按钮属性goodsInfo页面,数字属于numbox组件
				2.由于涉及到了父子组件的嵌套.所以,无法直接在goodsInfo页面中获取
				到选中的商品数量值
				3.怎么解决这个问题:涉及到了子组件向父组件传值(事件调用机制)
				4.事件调用的本质:父向子传递方法,子调用这个方法,同时把数据当作参数传递给这个方法
            -->
          </p>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号:{{goodsList.goods_no}}</p>
          <p>库存情况:{{goodsList.stock_quantity}}件</p>
          <p>上架时间:{{goodsList.add_time | dateFormat}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="getDesc(id)">图文介绍</mt-button>

        <mt-button type="danger" size="large" plain @click="getComment(id)">评论列表</mt-button>
      </div>
    </div>
  </div>
</template>
 
<script>
import lunbotu from "../subcomponents/Lunbotu";
import numbox from "../subcomponents/goodsInfo_numbox";
export default {
  name: "",
  data() {
    return {
      id: this.$route.params.id, //将路由参数对象中的id挂载到data中
      lunboList: [], //这是存放的轮播图的数据
      goodsList: [], //商品列表详情
      ballFlag: false, //控制小球隐藏显示
      selectedCount: 1, //保存用户选中的商品数量,默认,用户买一个
    };
  },
  mounted() {
    this.getLunbo();
    this.getTitle();
  },
  methods: {
    getLunbo() {
      this.$http.get("api/getthumimages/" + this.id).then((res) => {
        if (res.body.status === 0) {
          //放入数组中之前,为item添加img属性,因为轮播图组件只认识
          // item.img,不认识item.src
          res.body.message.forEach((item) => {
            item.img = item.src;
            //这里个人思考应该是element.src=element.img,但是却相反,不求甚解
          });
          this.lunboList = res.body.message;
        }
      });
    },
    getTitle() {
      //获取商品标题
      this.$http.get("api/goods/getinfo/" + this.id).then((res) => {
        if (res.body.status === 0) {
          // console.log(res.body);
          this.goodsList = res.body.message[0];
        }
      });
    },
    getDesc(id) {
      //点击使用编程式导航跳转到图文介绍页面
      this.$router.push({ name: "goodsDesc", params: { id } });
    },
    getComment(id) {
      this.$router.push({ name: "goodsComment", params: { id } });
    },
    addToShopcar() {
      //添加到购物车
      this.ballFlag = !this.ballFlag;
	  // {id:商品id,count:商品数量,price:商品单价,selected:是否被选中}
	  //拼接出一个要保存到store(通过mutations)中 car数组里面的商品信息对象
      let goodsInfo = {
        id: this.id,
        count: this.selectedCount,
        price: this.goodsList.sell_price,
        selected: true
	  };
	  //调用store中的mutations来将商品信息加入购物车
	  this.$store.commit("addToCar",goodsInfo)
    },
    beforeEnter(e) {
      e.style.transform = "translate(0, 0)";
    },
    enter(e, done) {
       // 注意：这句话，没有实际的作用，但是，如果不写，出不来动画效果；
          //可以认为 e.offsetWidth 会强制动画刷新
      e.offsetWidth;
      /*小球动画优化思路:
		1.先分析导致动画不准确的本质原因:我们把小球最终  位移到的 位置,
		已经局限在了某一分辨率下的 滚动条未滚动的情况下;
		2.只要分辨率和测试的时候不一样,或者滚动条有一定的滚动距离之后,问题出现了'
		3.因此,我们经过分析,得到结论:不能把位置的距离固定,而是应该根据不同情况,动态计算这个坐标值
		4.经过分析,得出解题思路:先得到徽标横坐标.再得的小球的横纵坐标,然后让y值求差,x值也求差,得到的结果
		就是横纵坐标和要位移的距离
		5.如何获取徽标和小球的位置? domObject.getBoundingClientRect()
		*/
      //获取小球的在页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      //获取徽标的位置
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();
      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;

      e.style.transform = `translate(${xDist}px,${yDist}px)`;
      e.style.transition = "all .5s cubic-bezier(.4,-0.3,1,.68)";
      done();
    },
    afterEnter(e) {
      this.ballFlag = !this.ballFlag;
    },
    getSelectedCount(count) {
      //当子组件把选中的数量传递给父组件时,把选中的值保存到data上
      this.selectedCount = count;
      //   console.log(this.selectedCount);
    },
  },
  components: {
    lunbotu,
    numbox,
  },
};
</script>
 
<style scoped lang = "scss">
.goodsInfo {
  background-color: #eee;
  overflow: hidden;
  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer {
    /* 父元素的display属性是:flex时,<br不生效> */
    display: block;
  }

  button {
    margin: 15px 0;
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    z-index: 99;
    position: absolute;
    top: 410px;
    left: 137px;
  }
}
</style>